<template>

    <div>
        <div class="header-sum-card">
            <div>
                <Row :gutter="20" class="mt10">
                    <Col class="mb10" :lg="24" :md="24" :sm="24" :xs="24">
                        <Card>
                            <Row>
                                <Col span="18">
                                    <Input size="large" icon="ios-search" clearable placeholder="search..."
                                           v-model="Keyword" @on-enter="searchBlog()" @on-clear="searchClear()"/>

                                </Col>
                                <Col span="6">
                                    <Button style="margin-left: 15px;" size="large" type="info" @click="addBlog()">添加
                                    </Button>

                                </Col>

                            </Row>

                        </Card>
                    </Col>
                    <Col class="mb10" :lg="6" :md="8" :sm="12" :xs="24" v-for="(item,index) in blogsData">

                        <Card>
                            <div style="text-align: center;">
                                <img :src="item.firstImageUrl" alt=""
                                     style="border-radius: 5px;width: 85%;height: 200px">
                                <h2>{{item.title}}</h2>
                            </div>
                            <div>
                                <div style="text-align: right">
                                    <Tag color="success">
                                        <Icon type="ios-bulb"></Icon>
                                        {{item.type.name}}
                                    </Tag>
                                    <span style="color: white">

                                <Tag :style="{'background-color' :item.published  ? '#2D9AFF':'orange'}"><Icon
                                        type="ios-aperture-outline"/>{{item.published?'发布':'未发布'}}</Tag>
                                </span>

                                    <Tag color="success">
                                        <Icon type="md-eye"/>
                                        {{item.views}}
                                    </Tag>

                                    <p><span class="type-status-time">更新时间：</span>{{dateFilter(item.updateTime)}}</p>
                                    <Button type="info" style="margin-right: 10px" @click="edit(item.id)">编辑</Button>
                                    <Button type="error" @click="deleteBlog(item.id)">{{item.published?'回收站':'删除'}}
                                    </Button>
                                </div>
                            </div>
                        </Card>
                    </Col>

                </Row>
                <!--                        分页导航栏-->
                <div style="text-align: center;margin-top: 10px;">

                    <Page v-show="this.totals===0?false:true" :total="totals" show-sizer @on-change="page"
                          @on-page-size-change="changePageSize" :page-size-opts="[8,16,24]" :page-size="8"/>
                </div>
            </div>

        </div>
        <template>
            <BackTop :height="100" :bottom="50">
                <div style="background-color:#76A09D;border-radius: 50%">
                    <Icon type="md-arrow-round-up"/>
                </div>
            </BackTop>
        </template>
    </div>

</template>
<script>
    export default {
        data() {
            return {

                totals: 0,
                blogsData: [],
                //搜索博客的关键字
                Keyword: '',


            }
        },
        created() {
            this.getBlogList();
        },
        methods: {
            //跳转添加页面方法
            addBlog() {
                this.$router.push('blog');
            },
            //编辑方法,将当前的id传递给编辑页
            edit(id) {
                this.$router.push({
                    path: 'blog',
                    query: {
                        id: id,
                    },
                })
            },
            //获取博客列表的方法
            async getBlogList() {
                const {data: result} = await this.$http.get("getPageList/0/8");
                if (result.code === 200) {
                    this.$Message.success(result.message);
                    this.blogsData = result.data.content;
                    this.totals = result.data.totalElements;
                }
            },
            //格式化时间的方法
            dateFilter: function (input) {
                var d = new Date(input);
                var year = d.getFullYear();
                var month = d.getMonth() < 9 ? "0" + (d.getMonth() + 1) : "" + (d.getMonth() + 1);
                var day = d.getDate() < 10 ? "0" + d.getDate() : "" + d.getDate();
                var hour = d.getHours() < 10 ? "0" + d.getHours() : "" + d.getHours();
                var minutes = d.getMinutes() < 10 ? "0" + d.getMinutes() : "" + d.getMinutes();
                var seconds = d.getSeconds() < 10 ? "0" + d.getSeconds() : "" + d.getSeconds();
                return (year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + seconds);
            },
            //分页方法
            async page(currentPage) {
                const {data: result} = await this.$http.get("getPageList/" + (currentPage - 1) + "/8");
                if (result.code === 200) {
                    this.blogsData = result.data.content;
                    this.totals = result.data.totalElements;
                }
            },
            //改变每页显示条数的方法
            async changePageSize(pageSize) {
                const {data: result} = await this.$http.get("getPageList/0/" + pageSize);

                if (result.code === 200) {
                    this.blogsData = result.data.content;
                    this.totals = result.data.totalElements;
                }
            },
            //搜索博客的方法
            async searchBlog() {
                const {data: result} = await this.$http.post("searchBlog", this.Keyword)
                if (result.code === 200) {
                    this.blogsData = result.data.content
                    this.totals = 0
                    this.$Message.success(result.message)

                }
            },
            //搜索框清除按钮
            searchClear() {
                this.getBlogList();
            },
            //删除或回收站方法
            async deleteBlog(id) {
                const {data: result} = await this.$http.post("delete/" + id)
                if (result.code === 200){
                    this.$Message.success(result.message)
                    location.reload()
                }
            }
        },


    }
</script>
<style lang="less">
    .mt10 {
        margin-top: 10px;
    }

    .tc {
        text-align: center
    }

    .header-sum-card {
        font-family: 幼圆;

        span.num {
            font-size: 30px;
        }
    }

    .type-status-time {
        font-size: 16px;
        font-weight: bolder;
    }
</style>
